<!--
  * new page
  * @author: liuxin
  * @since: 2024-08-25
  * index.vue
 -->
<template>
    <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
    <div class="table-wrapped">
        <div class="table-top">
            <div class="table-header">
                <div>
                    <el-input v-model="name" class="w-50 m-2" size="large" placeholder="输入操作者进行搜索" :prefix-icon="Search"
                        @change="searchOperationPerson()" clearable @clear="getoperationFirstPageList" />
                </div>
                <div class="upload-wrapped">

                    <el-button type="primary" @click="clearList">清空操作日志</el-button>

                </div>
            </div>
            <div class="table-content">
                <el-table :data="tableData" style="width: 100%;" border stripe>
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="operation_person" label="操作者"></el-table-column>
                    <el-table-column prop="operation_content" label="操作内容"> </el-table-column>
                    <el-table-column prop="operation_level" label="操作等级">
                        <template #default="{ row }">
                            <el-tag class="ml-2" type="success">{{ row.operation_level }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operation_time" label="操作时间" width="120">
                        <template #default="{ row }">
                            <div>{{ row.operation_time?.slice(0, 10) }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="table-footer">
            <el-pagination :page-size="1" :current-page="paginationData.operationCurrentPage" :pager-count="7"
                :page-count="paginationData.operationPageCount" :total="paginationData.operationTotal"
                @current-change="operationCurrentChange" layout="prev, pager, next" />
        </div>
    </div>
    <tips ref="tip" @success="getoperationFirstPageList"></tips>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount } from "vue"
import breadCrumb from '@/components/bread_crumb.vue'
import { Search } from '@element-plus/icons-vue';
import { searchOperationLogList, operationLogListLength, returnOperationListData, clearOperationLogList } from '@/api/log.js'
import { bus } from "@/utils/mitt.js"
import tips from "./components/tips.vue"

//面包屑
const breadcrumb = ref()
//面包屑参数
const item = ref({
    first: '操作日志',
    second: '',
})

// 文件表格数据
const tableData = ref([])

//  分页数据
const paginationData = reactive({
    // 操作日志总数
    operationTotal: 1,
    // 操作日志列表总页数
    operationPageCount: 1,
    // 操作日志列表当前所处页数
    operationCurrentPage: 1,

})
// 获取操作日志列表的页数
const getoperationLengthFn = async () => {
    const res = await operationLogListLength()
    paginationData.operationTotal = res.length
    paginationData.operationPageCount = Math.ceil(res.length / 10)
}
getoperationLengthFn()
// 默认获取操作日志列表第一页的数据
const getoperationFirstPageList = async () => {
    tableData.value = await returnOperationListData(1)
}
getoperationFirstPageList()

// 操作日志列表监听换页
const operationCurrentChange = async (value: number) => {
    paginationData.operationCurrentPage = value
    tableData.value = await returnOperationListData(paginationData.operationCurrentPage)
}

const name = ref()
const searchOperationPerson = async () => {
    tableData.value = await searchOperationLogList(name.value)
}

const tip = ref()
const clearList = () => {
    // bus.emit('deleteFile', id)
    tip.value.open()
}
/* // 取消订阅/监听
onBeforeUnmount(() => {
    bus.all.clear()
}) */
</script>

<style scoped lang="scss">
:deep(.el-table .cell) {
    font-weight: 400;
}

a {
    color: #fff;
    display: block;
    text-decoration: none;
}
</style>